
<template>
  <div class="animate__animated animate__fadeInUp">
    <div class="datr">
      <p class="ga"></p>
      <span class="chryu">成员管理</span>
    </div>
    <el-card shadow="never">
      <div
        class="bigre animate__animated animate__fadeInUp animate__delay-0.9s"
      >
        <span>编辑成员</span>
        <p>
          <el-row>
            <el-button size="small" @click="fanhui">返回</el-button>
          </el-row>
        </p>
      </div>

      <!--表单 -->

      <div class="d-flex a-center j-center mt-1">
        <div class="biaoge">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!-- 成员名称 -->
            <el-form-item label="成员账号" prop="number">
              <el-input
                v-model="ruleForm.number"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <!-- 成员姓名 -->
            <el-form-item label="成员姓名" prop="member_name">
              <el-input v-model="ruleForm.member_name" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 邮箱 -->
            <el-form-item prop="mail" label="邮箱">
              <el-input v-model="ruleForm.mail"></el-input>
            </el-form-item>
            <!-- 所属部门 -->
            <el-form-item label="所属部门" prop="department_name">
              <el-select v-model="value5" :placeholder="this.numengmorenzhi">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 权限组 -->
           <el-form-item label="权限组" required>
              <el-select
                v-model="value6"
                :placeholder="this.quanxiandemorenzhi"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 所属场馆 -->
            <el-form-item label="所属场馆" prop="cities">
              <el-checkbox-group v-model="checkedCities" :min="1" :max="4">
                <el-checkbox
                  v-for="(item, index) in partData"
                  :label="item.value"
                  :key="index"
                  >{{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <!-- 是否销售人员 -->
            <el-form-item label="是否销售人员" prop="is_sale_person">
              <el-radio-group v-model="ruleForm.is_sale_person">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item label="密码" prop="pass">
              <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <!-- 确认密码 -->
            <el-form-item label="确认密码" prop="checkPass">
              <el-input
                type="password"
                v-model="ruleForm.checkPass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <!-- 备注信息 -->
            <el-form-item label="备注信息" prop="desc">
              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script >
import { color, number } from "echarts";
export default {
  name: "MemberEditing",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      user:0,//接收编辑id
      numengmorenzhi: "", //默认的部门
      value5: "", //部门的值
      quanxiandemorenzhi:"",//默认的权限
      value6: "", //权限的值
      checkedCities: [1,19], //多选框
      isIndeterminate: true, //多选框
      checkAll: false, //多选框
      options: {}, //部门
      options2: {}, //权限
      shuku: {},
      quanxuanyuanids:"",//权限没有编辑原来的id
      bumengyuanids:"",//部门没有编辑原来的id
      ruleForm: {
        // pass: "", //密码
        // checkPass: "", //确认密码
        // name: "王方华", //姓名
        // mingcheng: "", //成员名称
        // email: "", //成员邮箱
        // region: "", //成员部门
        // regionl: "", //权限组
        // type: [], // 所属场馆
        // resource: "", //   是否销售人员
      },
      partData: [], // 部门的新数据
      rules: {
        //成员名称
        number: [
          { required: true, message: "请输入成员名称", trigger: "blur" },
          {
            min: 6,
            max: 11,
            message: "长度在 6 到 11 个字符",
            trigger: "blur",
          },
        ],
        //姓名
        member_name: [
          { required: true, message: "请输入成员姓名", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
           {pattern:/^[\u4e00-\u9fa5]{2,6}$/, message: "请输入汉字",trigger: "blur" },
        ],
        //成员邮箱
        mail: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        //成员部门
        // department_name: [
        //   { required: true, message: "请选择活动区域", trigger: "change" },
        // ],
        //权限组
        regionl: [
          { required: true, message: "请选择活动区域", trigger: "changel" },
        ],
        // 所属场馆
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个所属场馆",
            trigger: "change",
          },
        ],
        //   是否销售人员
        is_sale_person: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        // 备注信息
        desc: [{ required: true, message: "备注信息", trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur",required: true }],
        checkPass: [{ validator: validatePass2, trigger: "blur",required: true }],
      },
      // 邮箱验证
      dynamicValidateForm: {
        domains: [
          {
            value: "",
          },
        ],
        email: "",
      },
    };
  },
  // 函数
  methods: {
    // 提交的时候
    submitForm(formName) {
      console.log(this.checkedCities)
      this.$refs[formName].validate((valid) => {
        if (valid) {
         
         this.ruleForm.is_sale_person = this.ruleForm.is_sale_person == "否" ? 0 : 1; //是否启用的判断
        //   console.log(this.ruleForm.number)
        //   console.log(this.ruleForm.member_name)
        //   console.log(this.ruleForm.mail)
        //   console.log(this.value5)
        //   console.log(this.value6)
        //   console.log(this.checkedCities)
        //   console.log(this.ruleForm.checkPass)
        //   console.log(this.ruleForm.desc)
        //  console.log(this.ruleForm.resource)
        if(this.value5==""){
          this.value5=this.bumengyuanids;
        };
        if(this.value6==""){
          this.value6=this.quanxuanyuanids;
        };
        

        this.$axios({
          url:"/gym/member/update",
          method:"post",
          data:{
            id:this.user,
            number:this.ruleForm.number,
            name:this.ruleForm.member_name,
            mail:this.ruleForm.mail,
            department:this.value5,
            privileges:this.value6,
            gym:this.checkedCities.toString(),
            isSalePerson:this.ruleForm.is_sale_person,
            loginPwd:this.ruleForm.pass,
            info:this.ruleForm.desc
          }
        }).then((res)=>{
          if (
                (res.data.code >= 200 && res.data.code < 300) ||
                res.data.code == 304
              ) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.chaXun();
              } else {
                this.$message.error("修改失败");
              }
        })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    
    resetForm(formName) {
      this.$refs[formName].resetFields();
         this.ruleForm.number="";
           this.ruleForm.member_name="";
           this.ruleForm.mail="";
            this.value5=this.numengmorenzhi;
            this.value6=this.quanxiandemorenzhi;
            this.checkedCities=[];
           this.ruleForm.is_sale_person="是";
           this.ruleForm.pass="";
           this.ruleForm.desc+"";
    },
    // 返回
    fanhui() {
      this.$router.push("memberadmin");
    },
    // 成员编辑数据接收
    jieshp() {
      let mas = this.$route.params.user;
      console.log(mas)
      if (mas) sessionStorage.setItem("user", mas);
      this.user = this.$route.params.user || sessionStorage.getItem("user");
      console.log(this.user)
    },
    // 查询所有场馆
    chaxunchangguan() {
      this.$axios({
        url: "/gym/venue/findAllVenueName",
        method: "get",
      }).then((res) => {
        console.log(res);
        this.cities = res.data.data;

        // 定义一个新的对象
        let partObject = {};
        for (let i in this.cities) {
          // console.log(this.cities[i].name);
          partObject.label = this.cities[i].name;
          partObject.value = this.cities[i].id;
          // console.log(partObject);
          this.partData.push(partObject);
          partObject = {};
          // console.log(i);
        }
      });
    },
    // 查询所有权限
    chaxunquanxian() {
      this.$axios({
        url: "/gym/role/findPrivilegeAll",
        method: "get",
      }).then((res) => {
        // console.log(res);
        this.options2 = res.data.data;
        // this.quanxiandemorenzhi = this.options2[0].name;
        console.log(this.options2);
      });
    },
    // 查询所有部门
    chaxunbumeng() {
      this.$axios({
        url: "/gym/department/list",
        method: "post",
      }).then((res) => {
        this.options = res.data.data;
        // this.numengmorenzhi=this.options[0].name
      });
    },

    // 回显
     huixian() {
       console.log(this.user)
      this.$axios({
        url: "/gym/member/find",
        method: "get",
        params: {
          id:this.user,
        },
      }).then((res) => {
        this.ruleForm=res.data.data;
        this.ruleForm.pass=this.ruleForm.login_pwd;
        this.ruleForm.checkPass=this.ruleForm.login_pwd;
        this.ruleForm.desc=this.ruleForm.info;
        this.numengmorenzhi=this.ruleForm.department_name;
        this.quanxiandemorenzhi=this.ruleForm.privilege_name;
        let set=this.ruleForm.gym;
        this.checkedCities=set.split(',');
        this.checkedCities=this.checkedCities.map(Number);
        this.quanxuanyuanids=this.ruleForm.PRIVILEGES;
        this.bumengyuanids=this.ruleForm.department
        console.log(this.checkedCities)
         this.ruleForm.is_sale_person = this.ruleForm.is_sale_person == 0 ? "否" : "是";
         this.ruleForm.is_sale_person=this.ruleForm.is_sale_person

      });
    },
    
    
  },

  // 创建前
  brforeCreate() {},
  // 创建后
  created() {},
  // 挂载前
  beforeMount() {
    this.jieshp();
    this.chaxunchangguan();
    this.chaxunbumeng();
    this.huixian();
    this.chaxunquanxian();
},
  // 挂载后
  mounted() {},
  // 数据更新前
  beforeUpdate() {},
  // 数据更新后
  updated() {},
  // 销毁前
  beforeDestroy() {},
  // 销毁后
  destroyed() {},
};
</script>


<style scoped lang="less">
// 角色管理导航
.datr {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  background: linear-gradient(
    to right,
    rgba(17, 17, 17, 0.619),
    rgba(14, 13, 13, 0.251)
  );
  border-radius: 8px 8px 0px 0px;

  .ga {
    display: flex;
    align-items: center;
    width: 5px;
    height: 35px;
    background-color: rgba(0, 0, 255);
    // line-height: 50px;
    margin-left: 10px;
  }
  .chryu {
    display: inline-block;
    width: 80px;
    height: 50px;
    line-height: 50px;
    color: rgb(247, 245, 245);
    font-size: 17px;
    font-weight: bold;
  }
}
//表格导航栏css
.bigre {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  // justify-content:'center';
  line-height: 50px;
  background-color: rgba(175, 175, 175, 0.557);
  border-radius: 8px 8px 0px 0px;
  span {
    width: 80px;
    height: 50px;
    color: rgb(12, 3, 3);
  }
  p {
    width: 100px;
    height: 50px;
  }
}
// 表格
.biaoge {
  width: 500px;
}
// 备注框的大小
.el-form {
  /deep/.el-textarea__inner {
    padding: 40px !important;
  }
}
</style>